<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { RequestPath, startRequest } from '../base/RequestWork';
import { ElMessage } from 'element-plus';
// 用户数指标
let userCountDataOptions = ref({
    allCount: 0,
    title: { text: "近一月新增用户", left: "center" },
    xAxis:{
        data: getLastMonthDates(),
        axisLabel: { interval:0 }
    },
    yAxis:{},
    series: [{
        name: "用户数", type: "bar", data: [] as any 
    }]
});

let userActiveDataOptions = ref({
    allCount: 0,
    title: { text: "近一月活跃用户", left: "center" },
    xAxis:{
        data: getLastMonthDates(),
        axisLabel: { interval:0 }
    },
    yAxis:{},
    series: [{
        name: "活跃用户", type: "bar", data: [] as any 
    }]
});

let orderCountDataOptions = ref({
    allCount: 0,
    title: { text: "近一月新增订单", left: "center" },
    xAxis:{
        data: getLastMonthDates(),
        axisLabel: { interval:0 }
    },
    yAxis:{},
    series: [{
        name: "订单数", type: "bar", data: [] as any 
    }]
});

let billDataOptions = ref({
    allCount: 0,
    title: { text: "近一月销售额（￥）", left: "center" },
    xAxis:{
        data: getLastMonthDates(),
        axisLabel: { interval:0 }
    },
    yAxis:{},
    series: [{
        name: "销售额", type: "bar", data: [] as any 
    }]
});

let evaluationCountDataOptions = ref({
    allCount: 0,
    title: { text: "近一月新增评价", left: "center" },
    xAxis:{
        data: getLastMonthDates(),
        axisLabel: { interval:0 }
    },
    yAxis:{},
    series: [{
        name: "评价数", type: "bar", data: [] as any 
    }]
});

onMounted(()=>{
    // 调用各个数据指标的数据获取方法
    getUserCountData()
    getUserActiveData()
    getOrderCountData()
    getBillData()
    getEvaluationCountData()
})

function getUserCountData() {
    startRequest(RequestPath.statisticalGet, 'get', {type: 0}).then((response)=>{
        // 对总数属性进行赋值
        userCountDataOptions.value.allCount = response.data.data.allCount
        // 服务端返回的最近一月的数据
        let datas = response.data.data.datas
        // 用来绘制图表的结果列表
        let result = []
        // 最近一个月的日期
        let dates = getLastMonthDates()
        for (let i = 0; i < dates.length; i++) {
            let date = dates[i]
            // 从服务端数据中查找此日期的数据
            let d = datas.filter((item:any)=>{
                if (getMonthDay(item.date) == date) { return true }
                return false
            }).pop()
            // 有数据则放入列表中，否则用0填充
            if (d) {
                result.push(d.count)
            } else {
                result.push(0)
            }
        }
        userCountDataOptions.value.series[0].data = result
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}

function getUserActiveData() {
    startRequest(RequestPath.statisticalGet, 'get', {type: 1}).then((response)=>{
        // 对属性进行赋值
        userActiveDataOptions.value.allCount = response.data.data.allCount
        let datas = response.data.data.datas
        let result = []
        let dates = getLastMonthDates()
        for (let i = 0; i < dates.length; i++) {
            let date = dates[i]
            let d = datas.filter((item:any)=>{
                if (getMonthDay(item.date) == date) { return true }
                return false
            }).pop()
            if (d) {
                result.push(d.count)
            } else {
                result.push(0)
            }
        }
        userActiveDataOptions.value.series[0].data = result
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}

function getOrderCountData() {
    startRequest(RequestPath.statisticalGet, 'get', {type: 2}).then((response)=>{
        // 对属性进行赋值
        orderCountDataOptions.value.allCount = response.data.data.allCount
        let datas = response.data.data.datas
        let result = []
        let dates = getLastMonthDates()
        for (let i = 0; i < dates.length; i++) {
            let date = dates[i]
            let d = datas.filter((item:any)=>{
                if (getMonthDay(item.date) == date) { return true }
                return false
            }).pop()
            if (d) {
                result.push(d.count)
            } else {
                result.push(0)
            }
        }
        orderCountDataOptions.value.series[0].data = result
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}

function getBillData() {
    startRequest(RequestPath.statisticalGet, 'get', {type: 3}).then((response)=>{
        // 对属性进行赋值
        billDataOptions.value.allCount = response.data.data.allCount
        let datas = response.data.data.datas
        let result = []
        let dates = getLastMonthDates()
        for (let i = 0; i < dates.length; i++) {
            let date = dates[i]
            let d = datas.filter((item:any)=>{
                if (getMonthDay(item.date) == date) { return true }
                return false
            }).pop()
            if (d) {
                result.push(d.count)
            } else {
                result.push(0)
            }
        }
        billDataOptions.value.series[0].data = result
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}

function getEvaluationCountData() {
    startRequest(RequestPath.statisticalGet, 'get', {type: 0}).then((response)=>{
        // 对属性进行赋值
        evaluationCountDataOptions.value.allCount = response.data.data.allCount
        let datas = response.data.data.datas
        let result = []
        let dates = getLastMonthDates()
        for (let i = 0; i < dates.length; i++) {
            let date = dates[i]
            let d = datas.filter((item:any)=>{
                if (getMonthDay(item.date) == date) { return true }
                return false
            }).pop()
            if (d) {
                result.push(d.count)
            } else {
                result.push(0)
            }
        }
        evaluationCountDataOptions.value.series[0].data = result
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}

// 获取近1月的日期
function getLastMonthDates() {
  let dates = [];
  // 当前日期
  let currentDate = new Date();
  // 取最近30天
  for (let i = 29; i >= 0; i--) {
    let date = new Date(currentDate);
    date.setDate(currentDate.getDate() - i);
    // 解析出月、日信息
    let month = date.getMonth() + 1;
    let day = date.getDate();
    dates.push(month + '/' + day);
  } 
  return dates;
}

// 将日期进行格式化
function getMonthDay(date: string): string {
    let newDate = new Date(date);
    let month = newDate.getMonth() + 1;
    let day = newDate.getDate();
    return month + '/' + day
}

</script>

<template>
    <div>
        <div style="font-size: 15px; font-weight: 900; margin-left: 80px; margin-top: 10px;">总用户数: {{ userCountDataOptions.allCount }}</div>
        <v-chart :option="userCountDataOptions" style="height: 200px;"></v-chart>
    </div>
    <div>
        <div style="font-size: 15px; font-weight: 900; margin-left: 80px; margin-top: 10px;">昨日活跃用户数: {{ userActiveDataOptions.allCount }}</div>
        <v-chart :option="userActiveDataOptions" style="height: 200px;"></v-chart>
    </div>
    <div>
        <div style="font-size: 15px; font-weight: 900; margin-left: 80px; margin-top: 10px;">总订单数: {{ orderCountDataOptions.allCount }}</div>
        <v-chart :option="orderCountDataOptions" style="height: 200px;"></v-chart>
    </div>
    <div>
        <div style="font-size: 15px; font-weight: 900; margin-left: 80px; margin-top: 10px;">总销售额（￥）: {{ billDataOptions.allCount }}</div>
        <v-chart :option="billDataOptions" style="height: 200px;"></v-chart>
    </div>
    <div>
        <div style="font-size: 15px; font-weight: 900; margin-left: 80px; margin-top: 10px;">总评价数: {{ evaluationCountDataOptions.allCount }}</div>
        <v-chart :option="evaluationCountDataOptions" style="height: 200px;"></v-chart>
    </div>
</template>